<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
        margin: 10px 0;
        text-align: left;
        background-color: white;
        border-radius: 10px;
        padding: 10px;
    }

    ul {
        padding: 10px 10px;
        margin: 0;
    }

    .zong {
        width: 500px;
        height: 550px;
        background-color: rgb(213, 213, 213);
        margin: auto;
        text-align: center;
        position: relative;
        border-radius: 10px;
    }

    .biaoti {
        width: 100%;
        height: 50px;
    }

    .biaoti>span {
        display: inline-block;
        width: 30%;
        height: 100%;
        background-color: red;
        line-height: 50px;
    }

    img {
        width: 70px;
        height: 70px;
        vertical-align: middle;

    }

    h1 {
        margin: 0;
    }

    li>span {
        width: 100px;
        height: 70px;
        display: inline-block;
    }

    .gwc {
        position: absolute;
        bottom: 10px;
        right: 20px;
    }

    h1>span {
        font-size: 15px;
    }
</style>

<body>
    <div class="zong">
        <h1>热销爆款<span>（点击li商品就添加成功了）</span></h1>
        <div class="biaoti">
            <span class="dianqi">空调</span>
            <span class="dianqi">平板电视</span>
            <span class="dianqi">生活电器</span>
        </div>
        <div class="goods">
            <ul>
            </ul>
        </div>
        <button class="gwc" onclick="gwc()">购物车</button>
    </div>
    <script>
        //数据
        var arr1 = [{
            id: 1,
            img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.K62-kRTFQS05aIw1TwxRYQHaHa?w=182&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
            name: '美的空调',
            price: '6599',
        }, {
            id: 2,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.4vBPbJRfHyJxZdfNobIbQAHaE7?w=255&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '科隆空调',
            price: '6599'
        }, {
            id: 3,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.c502Toz-pgMcLypDFxrcsAHaE7?w=240&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '海尔空调',
            price: '6599'
        }]
        var arr2 = [{
            id: 4,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.PK05iF73CxLk7qECW4xX1AHaGC?w=262&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '海尔电视',
            price: '6599'
        }, {
            id: 5,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.q8P5ib6umZToxkZ7SRFv-wHaHa?w=218&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '乐视电视',
            price: '6599'
        }, {
            id: 6,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.YKCCyZrj8hyI6iPYwDRb_AHaHa?w=218&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '小米电视',
            price: '6599'
        }]
        var arr3 = [{
            id: 7,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.D29g183jNfgr-mIXaRMvVgHaE7?w=295&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '小米风扇',
            price: '6599'
        }, {
            id: 8,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.ZQBwkYiLWq5435yZi5eiowHaHa?w=211&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '海尔风扇',
            price: '6599'
        }, {
            id: 9,
            img: "https://ts1.tc.mm.bing.net/th/id/OIP-C.QxaktHNORg2sge8PEjh9TwHaLR?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
            name: '科隆风扇',
            price: '6599'
        },]
        //获取DOM
        var dianqi1 = document.querySelectorAll('.dianqi')[0]
        var dianqi2 = document.querySelectorAll('.dianqi')[1]
        var dianqi3 = document.querySelectorAll('.dianqi')[2]
        //渲染
        function xuan(dian, shu) {
            dian.addEventListener('click', () => {
                var goods = document.querySelector('.goods ul')
                goods.innerHTML = ''
                shu.forEach(item => {
                    goods.innerHTML += `
                   <li onclick="add(${item.id})">
                        <img src="${item.img}" alt="">
                        <span>${item.name}</span>
                        <span>￥${item.price}</span>
                    </li>`
                })
            })
        }
        xuan(dianqi1, arr1)
        xuan(dianqi2, arr2)
        xuan(dianqi3, arr3)
        //添加数据
        var zong_arr = []
        var ben = [] //购物车数据
        function add(id) {
            zong_arr.push(arr1, arr2, arr3) //整合的数据
            var a = zong_arr.flat(Infinity)
            var a_shu = a.find(item => item.id == id)
            ben.push({
                id: ben.length,
                name: a_shu.name,
                img: a_shu.img,
                price: a_shu.price,
                shul: 1,
                is: false
            })
            localStorage.setItem('gwshuju', JSON.stringify(ben))
        }
        //去购物车页面
        function gwc() {
            location.assign('./购物车.html')
        }

    </script>
</body>

</html>